import React, { useEffect } from 'react';
import G6, { Graph } from '../../../src';
import { IGraph } from '../../../src/interface/graph';

let graph: IGraph = null;

const data = {
  nodes: [
    {
      id: 'node1',
      x: 150,
      y: 50,
      label: 'node1',
    },
    {
      id: 'node2',
      x: 200,
      y: 150,
      label: 'node2',
    },
    {
      id: 'node3',
      x: 100,
      y: 150,
      label: 'node3',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
    {
      source: 'node2',
      target: 'node3',
    },
    {
      source: 'node3',
      target: 'node1',
    },
  ],
};

const ContextMenu = () => {
  const container = React.useRef();
  useEffect(() => {
    if (!graph) {
      const contextMenu = new G6.Menu({
        getContent: (graph) => {
          return 'abc';
        },
        handleMenuClick: (target, item) => {
          console.log(target, item);
        },
        offsetY: 20,
        offsetX: 20,
      });
      graph = new Graph({
        container: container.current as string | HTMLElement,
        width: 500,
        height: 500,
        plugins: [contextMenu],
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node'],
        },
        defaultNode: {
          type: 'modelRect',
          size: [182, 32],
          labelCfg: {
            offset: 12,
            style: {
              fontSize: 12,
            },
          },
          stateIcon: {
            show: false
          },
          preRect: {
            show: false
          },
        }
      });
      graph.data(data);
      graph.render();
      // let width = 500,
      //   height = 500;
      // graph.on('canvas:click', (evt) => {
      //   width += 100;
      //   height += 50;
      //   graph.changeSize(width, height);
      // });
      // graph.on('node:click', (e) => {
      //   graph.removeItem(e.item);
      // });
      // graph.on('edge:click', (e) => {
      //   graph.removeItem(e.item);
      // });
    }
  });
  return (
    <div>
      <div style={{ marginBottom: '10px', height: '130px' }}>
        <button id="create">创建节点</button>
      </div>
      <div style={{ left: '100px' }} ref={container}></div>
    </div>
  );
};

export default ContextMenu;
